﻿//-----------------------------------------------------
// radio-checkbox.scss
//-----------------------------------------------------
$iconRaido: true !default;
$iconRaidoSize: (
  m: 14px,
  l: 18px
) !default;
$iconCheckbox: true !default;
$iconCheckboxSize: (
  m: 13px,
  l: 16px
) !default;
$iconRadioCheckboxColor: #cccccc !default;
$iconRadioCheckboxColorActive: $blue !default;
%rc-basic {
  position: relative;
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari 和 Chrome */
  outline: none;
  background-color: #fff;
  box-sizing: border-box;
  border: none;
}

@if $iconRaido {
  .icon-radio[type='radio'] {
    position: relative;
    @extend %rc-basic;
    width: map-get($iconRaidoSize, m);
    height: map-get($iconRaidoSize, m);
    border-radius: 50%;
    border: 1px solid $iconRadioCheckboxColor;
    &:checked {
      background-color: $iconRadioCheckboxColorActive;
      border-color: $iconRadioCheckboxColorActive;
    }
    // &.disabled {
    //     color: map-get($colorDisabled, border);
    // }
    &:after {
      content: '';
      @include extended-click-range;
    }
  }
  .icon-radio-large {
    width: map-get($iconRaidoSize, l);
    height: map-get($iconRaidoSize, l);
  }
}

@if $iconCheckbox {
  .icon-checkbox {
    @extend %rc-basic;
    width: map-get($iconCheckboxSize, m);
    height: map-get($iconCheckboxSize, m);
    &::before {
      content: '';
      display: inline-block;
      width: map-get($iconCheckboxSize, m);
      height: map-get($iconCheckboxSize, m);
      border: 1px solid $iconRadioCheckboxColor;
    }
    &:checked {
      &::before {
        background-color: $iconRadioCheckboxColorActive;
        border-color: $iconRadioCheckboxColorActive;
      }
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 5px;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        -webkit-transform: translate(-50%, -50%) rotate(-52deg);
        -ms-transform: translate(-50%, -50%) rotate(-52deg);
        transform: translate(-50%, -50%) rotate(-52deg);
        box-sizing: border-box;
        margin-top: -1px;
        margin-left: 1px;
      }
    }
  }
  .icon-checkbox-l {
    width: map-get($iconCheckboxSize, l);
    height: map-get($iconCheckboxSize, l);
    &::before {
      width: map-get($iconCheckboxSize, l);
      height: map-get($iconCheckboxSize, l);
    }
  }
  .icon-checkbox-orange {
    &:checked {
      &::before {
        background-color: $orange;
        border-color: $orange;
      }
    }
  }
}
